<template>
  <div>
      <div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到好又多生鲜!</div>
			<div class="fr">
				<div class="login_info fl" v-if="username">
					欢迎您：<em>{{username}}</em>
					<a href="javascript:;" @click="logout">&nbsp;&nbsp;注销</a>
				</div>
				<div class="login_btn fl" v-else>
					<router-link to="/login">登录</router-link>
					<span>|</span>
					<router-link to="/register">注册</router-link>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span >|</span>
					<router-link to="/cart">我的购物车</router-link>
					<span >|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="../../assets/images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索" @click="btn">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">{{count}}</div>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全部商品分类</h1>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	
  </div>
</template>

<script>
export default {
    data(){
        return{
			username:sessionStorage.getItem('username'),
			count:sessionStorage.getItem('count')
        }
    },methods:{
        btn(){
           this.$router.push('/search')
		},
		logout(){
			//因为我们前端目前状态保持在前端，放到sessionStorage中，因此退出登录就是删除
			const sure=confirm('确定要注销账号吗？')   // confirm是 JavaScript 原生提供的 一个 确认对话框
			if(sure){
				sessionStorage.clear()  //清空状态缓存
				this.$router.go(0)     //主动刷新页面
			}
		}
    }
}
</script>

<style>

</style>